<template>
	<div>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<div class="evaluateInfo-page">
				<div class="evaluateInfo-top">
					<div class="order-info">
						<div><span class="label">订单编号：</span>{{info.orderSn}}</div>
						<div><span class="label">下单时间：</span>{{info.createTime}}</div>
					</div>
				</div>
		
				<div class="evaluateInfo-edit">
					<div style="margin-bottom:10px">1.本次交易购买的商品是否满意？</div>
					<u-rate :count="5" v-model="pingJiaFrom.goodsScore" activeColor="#f5a623" :readonly="PingJiaType == 'see'"></u-rate>
					<div style="margin:10px 0">2.本次交易物流发货速度是否满意？</div>
					<u-rate :count="5" v-model="pingJiaFrom.sendScore" activeColor="#f5a623" :readonly="PingJiaType == 'see'"></u-rate>
					<div  style="margin:10px 0">3.本次交易商家的服务能力及态度是否满意？</div>
					<u-rate :count="5" v-model="pingJiaFrom.storeScore" activeColor="#f5a623" :readonly="PingJiaType == 'see'"></u-rate>
					<div  style="margin:10px 0">4.本次交易销售人员的服务态度是否满意？</div>
					<u-rate :count="5" v-model="pingJiaFrom.salesScore" activeColor="#f5a623" :readonly="PingJiaType == 'see'"></u-rate>
					<div  style="margin:10px 0">5.对本次交易有什么问题及建议！</div>
					<u--textarea
							v-if="PingJiaType != 'see'"
							v-model="pingJiaFrom.evaluateContent"
							placeholder="请输入您的问题及建议，它对我们很重要"
					></u--textarea>
					<div v-else style="color:#000">{{pingJiaFrom.evaluateContent}}</div>
					
					<div v-if="PingJiaType != 'see'" style="margin-top:24rpx">
						<u-upload url="https://upload.qiniup.com" @delete="deleteImg($event)" :maxCount="3" :fileList="pingJiaFrom.evaluatePics" @afterRead="handleAfterRead($event)"></u-upload>
						<div style="text-align: left;font-size: 24rpx;">最多上传3张图片</div>
					</div>
					<div v-else style="margin-top:24rpx">
						<image :src="item" v-for="(item,index) in pingJiaFrom.evaluatePics" :key="item" @click="preview(index)" style="width:58px;height:58px;object-fit: contain;margin-top:10px;margin-right:10px;display: inline-block"></image>
					</div>
				</div>
		        <div style="padding:16px;" v-if="PingJiaType == 'add'">
					 <u-button type="primary" shape="circle" style="width:100%;" @click="subPingJia" :loading ="btnLoading">提交评价</u-button>
				</div>
		
			</div>
	
	</div>

</template>
<script>


import {getOrderDetail,addEvaluate,evaluateInfo} from '@/config/api.js'
import store from '@/store';
  import {
    imgCheck
  } from '@/plugins/upload/upload.js'

export default {
    name: 'evaluateInfo',
    computed: {
    	
		
    },
	data() {
		return {
		    btnLoading:false,
			showRight:false,
			pingJiaFrom:{
				orderId    : '',    //订单ID
				goodsScore   : 5,    //商品满意度
				sendScore    : 5,    //物流满意度
				storeScore   : 5,    //商家服务满意度
				salesScore   : 5,    //业务员服务满意度
				evaluateContent : "", //评价内容
				evaluatePics : []  //图片地址，多个逗号隔开
			},
			PingJiaType:'',
			orderId:'',
			info:{},
		}
	},
    watch:{

    },
	onLoad(e) {
		this.orderId = e.orderId
	    this.PingJiaType = e.type
		this.getInfo();
		if(this.PingJiaType == 'see'){
			evaluateInfo({orderId:this.orderId}).then((res)=>{
				this.pingJiaFrom.goodsScore = res.goodsScore;
				this.pingJiaFrom.sendScore = res.sendScore;
				this.pingJiaFrom.storeScore = res.storeScore;
				this.pingJiaFrom.salesScore = res.salesScore;
				this.pingJiaFrom.evaluateContent = res.evaluateContent;
				this.pingJiaFrom.evaluatePics = res.evaluatePics
			})
		}
	},
	methods: {
		//上传图片
		handleAfterRead(event) {
			if(event.file.size>2*1024*1000){
				uni.showToast({
					title:'图片大小超过2M，请重新选择照片',
					icon:'none'
				})		
				return
			}
			uni.showLoading({
				title: '上传中',
			});
			imgCheck(event.file.url).then((res)=>{
				  this.pingJiaFrom.evaluatePics.push({url:res})
				uni.hideLoading()
			}).catch(()=>{
				uni.hideLoading()
			})
		},
		
		//删除图片
		deleteImg(event){
		    this.pingJiaFrom.evaluatePics.splice(event.index,1)
		},
		preview(index){
			uni.previewImage({urls: this.pingJiaFrom.evaluatePics,current: index});
		},
	
		//提交订单评价
		subPingJia(){
			let data = JSON.parse(JSON.stringify(this.pingJiaFrom));
			data.evaluatePics = [];
			data.orderId = this.orderId;
			this.btnLoading = true;
			this.pingJiaFrom.evaluatePics.forEach((el)=>{
				data.evaluatePics.push(el.url)
			});
			// data.evaluatePics = data.evaluatePics.join(",");
			console.log(data)
			addEvaluate(data).then((res)=>{
				uni.$u.toast('评价已提交！')
				setTimeout(()=>{
					this.btnLoading = false;
					uni.navigateBack();
				},2000);
			}).catch(()=>{
				this.btnLoading = false;
			})
		},

		//获取订单详情
		getInfo(){
			getOrderDetail({orderId:this.orderId}).then((res)=>{
				this.info = res;
			}).catch(()=>{

			})
		},
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

//订单评价
.evaluateInfo-page{
  min-height: 100%;
  padding-top:8px;
  background: $background-color;
  .evaluateInfo-top{
    padding:12px 16px;
    font-size:$m-font;
    line-height: 26px;
    background: #fff;
    .order-info{
      .label{
        color:$g-font-color
      }
    }
    .order-img{

    }
  }
  .evaluateInfo-edit{
    margin-top:8px;
    background: #fff;
    padding:12px 16px;
    font-size:$m-font;
    color:#888
  }
}
    
    

</style>
